<!-- 折线图 -->
<template>
  <div ref="line" class="line-chart">

  </div>
</template>

<script>
  // 引入echarts
  import * as echarts from 'echarts'
  export default {
    name: "LineChart",
    data() {
      return {
        dataset: [
          ['month', '签约客户数', '期权交易数', '互换交易数'],
          ['202101', 11, 37, 4],
          ['202102', 18, 34, 4],
          ['202103', 34, 35, 3],
          ['202104', 11, 37, 4],
          ['202105', 34, 35, 3],
          ['202106', 34, 35, 3],
          ['202107', 18, 34, 4],
          ['202108', 11, 37, 4],
          ['202109', 18, 34, 4],
          ['202110', 11, 37, 4],
          ['202111', 18, 34, 4],
          ['202112', 11, 37, 4],
        ],

        chart: {
          option: {
            legend: {},
            tooltip: {},
            // 数据集-存放x，y轴数据
            dataset: {
              // 提供一份数据。
              source: [
                // 第一行是第一个是其他几行第一个的类目，第一行第一个之后几个分别对应着数据
                ['month', '签约客户数', '期权交易数', '互换交易数'],
                ['202101', 11, 37, 4],
                ['202102', 18, 34, 4],
                ['202103', 34, 35, 3],
                ['202104', 11, 37, 4],
                ['202105', 34, 35, 3],
                ['202106', 34, 35, 3],
                ['202107', 18, 34, 4],
                ['202108', 11, 37, 4],
                ['202109', 18, 34, 4],
                ['202110', 11, 37, 4],
                ['202111', 18, 34, 4],
                ['202112', 11, 37, 4],
              ]
            },
            // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
            xAxis: { type: 'category' },
            // 声明一个 Y 轴，数值轴。
            yAxis: {},
            // 声明多个数据系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
            // 数据系列常用的有：line-线性，bar-柱状，pie-饼图
            series: [
              { type: 'line' },
              { type: 'line' },
              { type: 'line' }
            ],
          }
        }
      }
    },
    methods: {
      initChart() {
        let chart = echarts.init(this.$refs.line);
        chart.setOption(this.chart.option)
      }
    },
    mounted() {
      this.initChart()
    }
  }
</script>

<style scoped>
.line-chart{
  width: 100%;
  height: 100%;
}
</style>
